<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script type="text/javascript" src="../js/jquery.min.js"></script>

  <title>Document</title>

</head>

<body>
  <div class="head">
    <h1>个人客户/余额支付</h1>
  </div>
  <div class="databox">
    <div id="databox">
      <div style="height: 100px;width: 100%; line-height: 100px;font-size: 40px;">添加银行卡</div>
      <div>
        <div class="quick">
          账户名称：张三<br /><br />&ensp;&ensp;&ensp; 卡号：<input  id="payinput" placeholder="请输入卡号" type="text" />
          <br />
          <br />
          <input class="paybutton" id="Confirm" type="button" value="确认支付" />
        </div>
        <div class="bankform" style="display: none">
          <form action="" method="POST">
            <div class="oncedata">
              <div class="laberright">卡类型：</div>
              <div>交通银行</div>
            </div>
            <div class="oncedata">
              <div class="laberright">开户行：</div>
              <div>储蓄卡</div>
            </div>
            <div id="cxk">
              <div class="oncedata">
                <div class="laberright">开户行所在地：</div>
                <div>
                  <select id="prov"></select>
                  <select id="city"></select>
                </div>
              </div>
              <div class="oncedata">
                <div class="laberright">支行名称：</div>
                <div><select style="width: 204px;" id="bankname"></select></div>
              </div>
            </div>

            <div id="xyk" style="display: none">
              <div class="oncedata">
                <div style="margin-top: 8px" class="laberright">cnv2：</div>
                <div>
                  <input type="text" class="textinput" id="cnv2" placeholder="卡背面后3位">
                </div>
              </div>
              <div class="oncedata">
                <div style="margin-top: 8px" class="laberright">有效期：</div>
                <div><input type="text" class="textinput" id="period" placeholder="MM/YY输入MMYY"></div>
              </div>
            </div>

            <div class="oncedata">
              <div style="margin-top: 8px" class="laberright">预留手机号：</div>
              <div><input type="text" class="textinput" id="phoneinput" placeholder="请输入手机号码"></div>
            </div>
            <div style="margin: 50px">
              <input type="checkbox" name="" id="Agreementcb">我已阅读并同意<a href="#">《快捷支付服务协议》</a><br><br>
              <input type="button" id="bankdatabtn" class="paybutton" value="下一步" disabled="true">
              <a id="recardid">返回</a>
            </div>
          </form>
        </div>
        <div class="sendcode" style="display: none">
          <div style="height: 100px"></div>
          <span style="font-size: 16px">我们已向您的手机号13300001111发送了一条验证码，请查收后填写。</span>
          <div class="oncedata">
            <div style="margin-top: 8px" class="laberright">验证码：</div>
            <div><input type="text" class="textinput" id="codeinput" placeholder="请输入验证码"></div>
          </div><br>
          <input type="button" id="codebtn" class="paybutton" value="下一步" disabled="true">
        </div>
      </div>
    </div>
  </div>

</body>

</html>
<script>
  var check = $("#Agreementcb")[0];
  $("#bankdatabtn").click(function () {
    $(".bankform").hide();
    $(".sendcode").show();
  });
  $("#Agreementcb").click(function () {
    console.log(check.checked);
    if (check.checked == true) {
      $("#bankdatabtn").css("background", "#0080ff");
      $("#bankdatabtn").attr("disabled", false);
    } else {
      $("#bankdatabtn").css("background", "#ccc");
      $("#bankdatabtn").attr("disabled", true);
    }
  });

  $("#recardid").click(function () {
    $(".bankform").hide();
    $(".quick").show();
  });
  $("#Confirm").click(function () {
    $(".quick").hide();
    $(".bankform").show();
    var ctype = "xyk";
    if (ctype == "xyk") {
      $("#cxk").hide();
      $("#xyk").show();
    } else {
      $("#cxk").show();
      $("#xyk").hide();
    }
  });

  //定义省市的信息
  var provList = ['江苏', '浙江', '福建', '湖南'];
  var cityList = [];
  var bankList = ['江苏支行', '浙江支行', '福建支行', '湖南支行'];
  cityList[0] = ['南京', '苏州', '宿迁', '扬州'];
  cityList[1] = ['杭州', '温州', '宁波', '台州'];
  cityList[2] = ['福州', '厦门', '泉州', '漳州'];
  cityList[3] = ['长沙', '湘潭', '株洲', '湘西'];

  //获取select元素
  var provSelect = document.querySelector('#prov');
  var citySelect = document.querySelector('#city');
  var bankSelect = document.querySelector('#bankname');


  //把省的信息 添加到第一个select元素中
  provList.forEach(function (val, index) {
    provSelect.add(new Option(val, index))
  });
  bankList.forEach(function (val, index) {
    bankSelect.add(new Option(val, index))
  });

  //给第一个select绑定change事件
  provSelect.onchange = function () {
    //获取 当前的选项
    var index = this.value;
    //清空第二个select原先内容
    citySelect.length = 0;

    //选择对应的城市列表，添加到第二个select
    cityList[index].forEach(function (val, index) {
      citySelect.add(new Option(val, index));
    })
  }
  //手工触发一次 change事件
  provSelect.onchange();

</script>
<style>
  * {
    padding: 0;
    margin: 0;
  }

  a {
    text-decoration: none;
    color: #0080ff;
  }

  body {
    background-color: #ccc;
  }

  .head {
    width: 100%;
    height: 80px;
    text-align: center;
    background-color: #FFF;
    line-height: 80px;
  }

  .databox {
    width: 80%;
    height: 80vh;
    background-color: #FFF;
    margin-left: 10%;
    margin-top: 50px;
  }

  #databox {
    width: 60%;
    height: 80vh;
    /* background-color: #c2c2c2; */
    margin-left: 20%;
  }

  .quick {
    width: 100%;
    height: 200px;
    margin: 120px;
  }

  #payinput {
    width: 200px;
    height: 40px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
  }

  .paybutton {
    width: 100px;
    height: 40px;
    font-size: 16px;
    background: #0080ff;
    color: #fff;
    border-radius: 5px;
    margin-left: 150px;
    border: 1px solid #fff;
    cursor: pointer;
  }

  #bankdatabtn {
    background: #ccc;
  }

  .laberright {
    width: 150px;
    text-align: right;
  }

  .oncedata {
    display: flex;
    margin-top: 30px;
    font-size: 16px;
  }

  .textinput {
    width: 200px;
    height: 40px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
  }

  /* #phoneinput {
    width: 200px;
    height: 40px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
  } */

  select {
    width: 100px;
    padding: 5px;
    font-size: 16px;
  }

  .oncedata {
    margin: 20px;

  }

</style>
